<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片翻转 切换</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        #box {
            width: 320px;
            margin: 0 auto;
        }
        
        h1 {
            margin: 0;
            padding: 0;
            width: 340px;
            height: 30px;
            text-align: center;
            font-size: 20px;
            border: 1px solid #aaa;
            border-bottom: 2px solid #000;
        }
        
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            width: 320px;
            padding-bottom:5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            border: 1px solid #aaa;
            overflow: hidden;
        }
        
        li {
            width: 120px;
            height: 80px;
            /*border: 1px solid red;*/
            margin: 5px;
            display: flex;
            justify-content: center;
        }
        
        p {
            display: none;
            margin: auto 0;
            padding: 0;
            width: 120px;
            height: 0px;
            text-align: center;
            line-height: 80px;
            background-color: #F6A145;
            z-index: 1;
            overflow: hidden;
        }
        
        img {
            /*display: none;*/
            margin: auto 0;
            height: 80px;
            border: 1px solid #aaa;
            width: 120px;
            z-index: 2;
            /*height: 0px;*/
        }
    </style>
</head>

<body>
    <div id="box">
        <h1>热门品牌推荐</h1>

        <ul>
            <li>
                <img src="images/11.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/22.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/33.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/44.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/55.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/66.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/77.jpg" alt="">
                <p>肌龄</p>
            </li>
            <li>
                <img src="images/88.jpg" alt="">
                <p>肌龄</p>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $('li').each(function (index) {
        $(this).mouseenter(function () {
            $('img').eq(index).stop()
            $('p').eq(index).stop()
            $(this).find('img').animate({
                height: 0
            }, 500, function () {
                console.log(this)
                $(this).hide()
                $('li').find('p').eq(index).show().animate({
                    height: 80
                },500)
            })
        })
        $(this).mouseleave(function () {
            $('img').eq(index).stop()
            $('p').eq(index).stop()
            $(this).find('p').animate({
                height: 0
            }, 500, function () {
                console.log(this)
                $(this).hide()
                $('li').find('img').eq(index).show().animate({
                    height: 80
                },500)
            })
        })
        //     $(this).find('img').animate({
        //         height: 0
        //     })
        //     $(this).find('p').animate({
        //         height: 80
        //     })
        // }, function () {
        //     $(this).find('img').animate({
        //         height: 80
        //     })
        //     $(this).find('p').animate({
        //         height: 0
        //     })
    })

</script>